<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值记录</title>
    <!--引入 bootstrap 弹窗的样式 -->
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <!--引入 Layer 弹窗的样式 -->
    <link rel="stylesheet" href="/layer/theme/default/layer.css"/>
    <!--引入 angularJS 分页的样式 -->
    <link rel="stylesheet" href="/angularjs/pagination.css">
    <!--引入 jquery 类库 -->
    <script src="/bootstrap/js/jquery.min.js"></script>
    <!--引入 bootstrap 类库 -->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <!--引入 angular 的类库 -->
    <script src="/angularjs/angular.min.js"></script>
    <!--引入 Layer 弹窗的类库 -->
    <script src="/layer/layer.js"></script>
    <!--引入 angularJS 框架分页的类库 -->
    <script src="/angularjs/pagination.js"></script>
    <style>

    </style>
</head>
<body ng-app="app" ng-controller="ctr" ng-init="">
<div class="container">
    <div class="panel panel-default">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand">充值记录</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" ng-click="back()"><span class="glyphicon glyphicon-th-list"></span> 返回</a></li>
                </ul>
            </div>
        </nav>
        <div class="panel-body">
            <ul class="nav navbar-nav ">
                <li><a href="#" ng-click="load(-1)"> 全部</a></li>
                <li><a href="#" ng-click="load(0)"> 充值</a></li>
                <li><a href="#" ng-click="load(1)"> 提现</a></li>
            </ul>
            <table class="table table-striped table-hover table-condensed ">
                <tr>
                    <td>序号</td>
                    <td>记录类型</td>
                    <td>金额</td>
                    <td>日期</td>


                </tr>
                <tr ng-repeat="ol in records">
                    <td>{{$index +1}}</td>
                    <td ng-show="ol.recordType == 0">充值</td>
                    <td ng-show="ol.recordType == 1">提现</td>
                    <td ng-show="ol.recordType == 0">+{{ol.recordMoney | number:2}}</td>
                    <td ng-show="ol.recordType == 1" style="color: #FA6E48">-{{ol.recordMoney | number:2}}</td>
                    <td>{{ol.recordTime | date:'yyyy-MM-dd HH:mm:ss'  }}</td>
                </tr>
            </table>
            <div style="text-align: center">
                <tm-pagination conf="page" style="display: inline-block"></tm-pagination>
            </div>
        </div>
        <div class="panel-footer">
            <span>{{time|date:'yyyy-MM-dd HH:mm:ss'}}</span>
            <span style="float: right">&copy; 2021 SEA 版权所有</span>
        </div>
    </div>
</div>


<script>
    angular.module("app", ['ngCookies','pagination']).config(function ($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With']
    })
        .controller("ctr", ["$scope", "$http", '$interval', '$timeout', function ($scope, $http, $interval, $timeout) {

            $scope.time = new Date(); //日期时间信息
            $scope.type = -1;

            // 引入分页的配置对象属
            $scope.reload = true;
            $scope.page = {
                currentPage: 1, // 代表当前页
                itemsPerPage: 20, // 代表每页的记录数
                totalItems: 100, // 代表总记录数
                perPageOptions: [4], // 代表分页的选项列表
                // 每次页码改变时此事件会自动调用 ( 窗体一加载完毕后就会被调用 )
                onChange: function () {
                    if (!$scope.reload) {
                        return;
                    }
                    $scope.loadMoneyRecord();
                    $scope.reload = false;
                    $timeout(function () {
                        $scope.reload = true;
                    }, 200);
                }
            };

            //显示日期时间
            $interval(function () {
                $scope.time = new Date();
            }, 1000);

            //返回
            $scope.back = function () {
                window.location.href = "/views/stock/myinfo.html";
            };

            //加载记录信息
            $scope.load = function (type) {
                $scope.type = type;
                $scope.loadMoneyRecord();
            };

            //加载记录信息
            var index = -1;
            $scope.loadMoneyRecord = function () {
                index = layer.load();
                $http.get("http://localhost:12000/user/record?page=" + $scope.page.currentPage + "&pageSize=" + $scope.page.itemsPerPage
                    + "&type=" + $scope.type,{
                    headers: {token: localStorage.getItem("token")}
                }).success(function (data) {
                    if (data.code == 200){
                        $scope.page.totalItems = data.data.total;
                        $scope.records = data.data.list;
                        layer.close(index);
                    }
                    if (data.code == 403) {
                        window.location.href = "/views/user/login.html";
                    }
                });

            };

        }])
</script>
</body>
</html>